<template>
  <div class="articleInfo-wrap">
    <div class="articleInfo">
      <!-- 面包屑 -->
      <ul class="breadcrumbs" v-if="classify1 && classify1 !== '_posts'">
        <li>
          <router-link to="/" class="iconfont icon-home" title="首页" />
        </li>

        <li v-for="item in classifyList" :key="item">
          <!-- 跳目录页 -->
          <router-link v-if="cataloguePermalink" :to="getLink(item)">
            {{ item }}
          </router-link>
          <!-- 跳分类页 -->
          <router-link
            v-else-if="$themeConfig.category !== false"
            :to="`/categories/?category=${encodeURIComponent(item)}`"
            title="分类"
          >
            {{ item }}
          </router-link>
          <!-- 没有跳转 -->
          <span v-else>{{ item }}</span>
        </li>
      </ul>

      <!-- 作者&日期 -->
      <div class="info">
        <div class="author iconfont icon-touxiang" title="作者" v-if="author">
          <a
            :href="author.href || author.link"
            v-if="
              author.href || (author.link && typeof author.link === 'string')
            "
            target="_blank"
            class="beLink"
            title="作者"
          >
            {{ author.name }}
          </a>
          <a v-else href="javascript:;">{{ author.name || author }}</a>
        </div>
        <div class="date iconfont icon-riqi" title="创建时间" v-if="date">
          <a href="javascript:;">{{ date }}</a>
        </div>
        <div
          class="date iconfont icon-wenjian"
          title="分类"
          v-if="
            $themeConfig.category !== false &&
            !(classify1 && classify1 !== '_posts') &&
            categories
          "
        >
          <router-link
            :to="`/categories/?category=${encodeURIComponent(item)}`"
            v-for="(item, index) in categories"
            :key="index"
          >
            {{ item + ' ' }}
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: '',
      classify1: '',
      classifyList: [],
      cataloguePermalink: '',
      author: null,
      categories: [],
    }
  },
  created() {
    this.getPageInfo()
  },
  watch: {
    '$route.path'() {
      this.classifyList = []
      this.getPageInfo()
    },
  },
  methods: {
    getPageInfo() {
      const pageInfo = this.$page
      const { relativePath } = pageInfo
      const { sidebar } = this.$themeConfig

      // 分类采用解析文件夹地址名称的方式 (即使关闭分类功能也可以正确跳转目录页)
      const relativePathArr = relativePath.split('/')

      const classifyArr = relativePathArr[0].split('.')

      relativePathArr.forEach((item, index) => {
        const nameArr = item.split('.')
        if (index !== relativePathArr.length - 1) {
          this.classifyList.push(nameArr[1] || nameArr[0] || '')
        }
      })

      this.classify1 = this.classifyList[0]

      const cataloguePermalink =
        sidebar && sidebar.catalogue ? sidebar.catalogue[this.classify1] : '' // 目录页永久链接
      const author = this.$frontmatter.author || this.$themeConfig.author // 作者
      let date = (pageInfo.frontmatter.date || '').split(' ')[0] // 文章创建时间

      // 获取页面frontmatter的分类（碎片化文章使用）
      const { categories } = this.$frontmatter

      this.date = date
      this.cataloguePermalink = cataloguePermalink
      this.author = author
      this.categories = categories
    },

    getLink(item) {
      const { cataloguePermalink } = this
      if (item === cataloguePermalink) {
        return cataloguePermalink
      }
      return `${cataloguePermalink}${
        cataloguePermalink.charAt(cataloguePermalink.length - 1) === '/'
          ? ''
          : '/'
      }#${item}`
    },
  },
}
</script>

<style lang='stylus' scoped>
@require '../styles/wrapper.styl';

.articleInfo-wrap {
  @extend $wrapper;
  position: relative;
  z-index: 1;
  color: #888;

  .articleInfo {
    overflow: hidden;
    font-size: 0.92rem;

    .breadcrumbs {
      margin: 0;
      padding: 0;
      overflow: hidden;
      display: inline-block;
      line-height: 2rem;

      @media (max-width: 960px) {
        width: 100%;
      }

      li {
        list-style-type: none;
        float: left;
        padding-right: 5px;

        &:after {
          content: '/';
          margin-left: 5px;
          color: #999;
        }

        &:last-child {
          &:after {
            content: '';
          }
        }

        a {
          color: #888;

          &:before {
            font-size: 0.92rem;
          }

          &:hover {
            color: $accentColor;
          }
        }

        .icon-home {
          text-decoration: none;
        }
      }
    }

    .info {
      float: right;
      line-height: 32px;

      @media (max-width: 960px) {
        float: left;
      }

      div {
        float: left;
        margin-left: 20px;
        font-size: 0.8rem;

        @media (max-width: 960px) {
          margin: 0 20px 0 0;
        }

        &:before {
          margin-right: 3px;
        }

        a {
          color: #888;

          &:hover {
            text-decoration: none;
          }
        }

        a.beLink {
          &:hover {
            color: $accentColor;
            text-decoration: underline;
          }
        }
      }
    }
  }
}
</style>
